<template>
    <Menu :theme="theme2" :open-names="['1']" accordion width="120" class="over" :style="{height:tableHeight+'px'}" 
    @on-select="handleSelect" @on-open-change="handleOPenChange">
         <Submenu name="1">
            <template slot="title">
                <span>工厂计划(达成率)</span>
            </template>
            <MenuItem :name="item.id" v-for="item of planYearList" :key="item.id" >
               <span>{{item.name}}</span> <span class="right">{{item.finishPercent}}%</span>
           </MenuItem>
        </Submenu>
    </Menu>
</template>
<script>
    export default {
        props:{
            planYearList:Array
        },
        data () {
            return {
                theme2: 'light' 
            }
        },
        methods:{
            handleSelect(name){
                this.$emit('handleOPenChange',name)
            },
            handleOPenChange(name){

            }
 
        },
        computed: {
            tableHeight() {
                const filterHeight = 0
                var tableHeight = this.getTableHeight(filterHeight)+28
                return tableHeight;
            }
        }
    }
</script>
<style scoped>
    .over{
        overflow:auto;
        border:1px solid #409eff;
    }
    li.ivu-menu-item{
        /*padding:15px!important;*/
    }
    .right{
        float: right;
        color:green;
    }
</style>